<template>
  <a-drawer
      v-model:visible="visible"
      class="custom-class"
      :title="title"
      placement="right"
      :closable="false"
      :mask-closable="false"
      width="40%"
      :footer-style="{ textAlign: 'right' }"
  >
    <!-- 顶部按钮 -->
    <div>
      <a-button-group>
        <a-button @click="currentView = 'certificationInfo'">认证信息</a-button>
        <a-button @click="currentView = 'reviewInfo'">审核信息</a-button>
      </a-button-group>
    </div>

    <!-- 抽屉内容部分 -->
    <div v-if="currentView === 'certificationInfo'">
      <!-- 认证信息的内容 -->
      <a-form ref="formRef" :model="formData" scroll-to-first-error :disabled="view">
        <a-form-item label="所属区域" name="deptId" :rules="[{ required: true, message: '请选择所属区域' }]">
          <!-- 表单项 -->
        </a-form-item>
        <!-- 其他表单内容 -->
      </a-form>
    </div>

    <div v-else-if="currentView === 'reviewInfo'">
      <!-- 审核信息的内容 -->
      <p>这里是审核信息的内容部分。</p>
    </div>

    <!-- 抽屉底部的按钮 -->
    <template #footer>
      <a-button type="primary" @click="onSubmit">确定</a-button>
      <a-button style="margin-left: 10px" @click="handleCancel">取消</a-button>
    </template>
  </a-drawer>
</template>

<script>
export default {
  data() {
    return {
      visible: true,
      title: '标题',
      currentView: 'certificationInfo', // 控制显示的内容
      formData: {
        // 表单数据
      },
      view: false
    };
  },
  methods: {
    onSubmit() {
      // 提交表单的逻辑
    },
    handleCancel() {
      this.visible = false;
    }
  }
};
</script>
